<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
   table{
      width: 800px;
      margin: 50px auto;

    }
    table,td{
      border: 1px solid red;
      border-collapse: collapse;
      text-align: center
    }

  </style>
</head>
<body>
  <!-- 动态创建表格案例 创建英雄列表-->
  
<script>
    var heads = ['姓名', '年龄', '性别', '学号', '薪资', '城市', '操作'];
    var datas = [
          {name:'欧阳霸天',age:19,gender:'男',stuId:'1001',salary:'20000',city:'上海'},
          {name:'令狐霸天',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
          {name:'诸葛霸天',age:19,gender:'男',stuId:'1001',salary:'20000',city:'南京'},
          {name:'西门霸天',age:19,gender:'男',stuId:'1001',salary:'20000',city:'深圳'},
          {name:'鸠摩智',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
          {name:'段延庆',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
          {name:'段正淳',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
          {name:'容子矩',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
          {name:'崔绿华',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
          {name:'梅超风',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
          {name:'鲁有脚',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
          {name:'焦木和尚',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
          {name:'韩小莹',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
          {name:'侯通海',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
          {name:'欧阳克',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
          {name:'欧阳峰',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
          {name:'玄真道人',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
          {name:'司徒伯雷',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
          {name:'陈近南',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
          {name:'张康年',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
          {name:'吴大鹏',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
          {name:'西奥图三世',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
          {name:'任盈盈',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
          {name:'林远图',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
          {name:'郑镖头',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
          {name:'张金鏊',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
          {name:'陈歪嘴',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
          {name:'洪人雄',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
          {name:'余人彦',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
          {name:'劳德诺',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
          {name:'玉钟子',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
          {name:'史镖头',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
          {name:'东方不败',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'}
        ];
    var body = document.querySelector('body');
    //1.先创建table
    var table = document.createElement('table');
    //2.创建表格中第一个tr(表头)
    var tr = document.createElement('tr');
    table.appendChild(tr);
    //3.动态根据表头中的数据创建td
    for(var i = 0 ; i < heads.length; i++){
      var td = document.createElement('td');
      td.innerText = heads[i];
      tr.appendChild(td);
    }
    //4.创建表格主体 先创建行
    for(var i = 0; i < datas.length; i++){
      //创建主体表格中的tr(行)
      var tr =  document.createElement('tr');
      for(var key in datas[i]){
        //创建主体表格中的td
        var td = document.createElement('td');
        td.innerText = datas[i][key];
        tr.appendChild(td);
      }
      //将创建好的tr添加到table中
      table.appendChild(tr);
      //单独创建最后一个td
      var last_td = document.createElement('td');
      last_td.innerHTML = '<a href="javascript:;" class="del">删除</a>';
      tr.appendChild(last_td)
    }
    //添加到页面中
    body.appendChild(table);

    //实现删除效果
    var a_del = document.querySelectorAll('a');
    for(var i = 0; i < a_del.length; i++){
      a_del[i].onclick = function(){
        if(confirm('您确定要删除么？')){
          // this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
          table.removeChild(this.parentNode.parentNode)
        }else{
          alert('吓死宝宝了 您已取消删除')
        }
      }
    }
</script>
</body>
</html>